////////////////////////////////////////////////////////////////////////////////
// Default Element Styles
// --------------------
// This partial establishes general rules and browser resets. Standard HTML
// elements (text, lists, tables, forms, etc...) are all defined here.
//
// This is largely addapted from the HTML5 Boilerplate project. Detailed
// information about Boilerplate CSS can be found at: http://h5bp.com/css
////////////////////////////////////////////////////////////////////////////////

//
// Reset box sizing
//
* {
  margin: 0;
  @include box-sizing(border-box);
  *behavior: url(../js/boxsizing.htc);
}

//
// HTML5 display definitions
//
@include reset-html5;

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

[hidden] {
  display: none;
}

//Skip link
#skip a {
  // "Skip to Navigation" link
  // ---------------------------
  // This link useful for both visually impaired people and those with 
  // mobility impairments who cannot use a mouse.
  @include element-invisible-focusable;
}

//site Name
#site-name {
  font-size: 2.2em;
  line-height: 1.3em;
  font-weight: 300;
  padding: 0 0 0.5em;
  margin: 0;
}

// Bug fix for views 2 edit links.
div.view div.views-admin-links {
  width: auto;
}

// Rollover edit links for blocks.
div.block {
  position: relative;
  .edit {
    display: none;
    position: absolute;
    right: -20px;
    top: -5px;
    z-index: 40;
    padding: 3px 8px 0;
    font-size: 10px;
    line-height: 16px;
    background-color: white;
    border: 1px solid #cccccc;
    // let's get fancy!
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0 1px 3px #888888;
    -webkit-box-shadow: -1px 1px 2px #666666;
    a {
      display: block;
      border: 0;
      padding: 0;
      margin: 0;
    }
  }
  &:hover .edit {
    display: block
  }
}

//
// Non-semantic Helper Classes
////////////////////////////////////////

.ir { // For image replacement
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  *line-height: 0;
  br {
    display: none;
  }
}

.hidden { // Hide from both screenreaders and browsers: h5bp.com/u
  display: none !important;
  visibility: hidden;
}

.visuallyhidden { // Hide only visually, but have it available for screenreaders: h5bp.com/v
  @include element-invisible;
  &.focusable:active, &.focusable:focus { // Allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
    @include element-invisible-off;
  }
}

.invisible { // Hide visually and from screenreaders, but maintain layout
  visibility: hidden;
}

.clearfix { // Contain floats: h5bp.com/q
  @include my-clearfix;
}

// clear classes
.clearleft, .clearl, .cleft {
  clear: left;
}
.clearright, .clearr, .cright {
  clear: right;
}

.clear, .clearboth, .clearall {
  clear: both;
}

// Float classes
.floatleft, .fleft, .floatl {
  @include my-float-left;
}

.floatright, .fright, .floatr {
  @include my-float-right;
}


//
// UI improvments.
//
#edit-title {
  font-size: 24px;
  width: 99%;
}

#system-themes-form img {
  width: 100px;
}

.form-item .description {
  font-style: italic;
  line-height: 1.2em;
  font-size: 0.8em;
  margin-top: 5px;
  color: #777;
}

#edit-delete {
  color: #c00;
}

//Messages
div.messages { // Console, style from slate theme.
  padding: 9px;
  margin: 1em 0;
  color: #036;
  background: #bdf;
  border: 1px solid #ace;
}

div.warning {
  color: #840;
  background: #fe6;
  border-color: #ed5;
}

div.error {
  color: white;
  background: #e63;
  border-color: #d52;
}

div.status {
  color: #360;
  background: #cf8;
  border-color: #bbee77;
}

//
// Base
//
html {
  font-size: 100%;                 // Correct text resizing oddly in IE6/7 when body font-size is set using em units
  -webkit-text-size-adjust: 100%;  // Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
  -ms-text-size-adjust: 100%;
}

html, button, input, select, textarea {
  font-family: $main_font;
  color: $main_text_color;
}

body {
  margin: 0;
  // Setting up font size, leading and font family
  // http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography
  font: 13px / 1.5em $main_font;
  letter-spacing: 0.03em;
}


//
// Remove text-shadow in selection highlight: h5bp.com/i
// These selection declarations have to be separate
//
::-moz-selection {
  background: $selection_bg_color;
  color: $selection_text_color;
  text-shadow: none;
}
::selection {
  background: $selection_bg_color;
  color: $selection_text_color;
  text-shadow: none;
}


//
// Embedded content
//
img {
  border: 0;
  -ms-interpolation-mode: bicubic; // Improve image quality when scaled in IE7: h5bp.com/d
  vertical-align: middle;          // Remove the gap between images and borders on image containers: h5bp.com/i/440
}

svg:not(:root) {
  overflow: hidden; // Correct overflow not hidden in IE9
}

//
// Figures
//
figure {
  margin: 0;
}

//
// Forms
//
form {
  margin: 0;
}

fieldset {
  @include reset-box-model;
}

label {
  cursor: pointer;  // Indicate that 'label' will shift focus to the associated form element
}

legend {
  border: 0;           // Correct color not inheriting in IE6/7/8/9
  *margin-left: -7px;  // Correct alignment displayed oddly in IE6/7
  padding: 0;          // Since we've removed the fieldset border, margin, and padding, we remove the default padding on legend to avoid unwanted horizontal whitespace.
  white-space: normal; // Allow text to wrap in Firefox 3.6
}

button, input, select, textarea {
  font-size: 100%;           // Correct font-size not inheriting in all browsers
  margin: 0;                 // Remove margins in FF3/4 S5 Chrome
  vertical-align: baseline;  // Define consistent vertical alignment display in all browsers
  *vertical-align: middle;
}

button, input {
  line-height: normal;  // Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)

}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;             // Display hand cursor for clickable form elements
  -webkit-appearance: button;  // Allow styling of clickable form elements in iOS
  *overflow: visible;          // Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
}

button[disabled], input[disabled] {
  cursor: default; // Re-set default cursor for disabled elements
}

input[type="checkbox"],
input[type="radio"] { // Consistent box sizing and appearance
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {  // Remove inner padding and border in FF3/4: h5bp.com/l
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;      // Remove default vertical scrollbar in IE6/7/8/9
  vertical-align: top;
  resize: vertical;    // Allow only vertical resizing
}

input:valid, textarea:valid { // Colors for form validity
}

input:invalid,
textarea:invalid {
  background-color: #f0dddd;
}

//
// Tables
//
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 99%;
}

td {
  vertical-align: top;
}

tr.even,
tr.odd {
  td {
    padding: 10px 5px;
  }
}

tr.odd {
  background-color: white;
}

//
// Chrome Frame Prompt
//
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: black;
  padding: 0.2em 0;
}

//
// Wireframe styles
//
.wireframe-mode {
  #header,
  #content-top,
  #content-top>*,
  #content-header,
  #content-header>*,
  #content-area,
  #content-area>*,
  #content-bottom,
  #content-bottom>*,
  #primary,
  #secondary,
  #sidebar-left-inner,
  #sidebar-right-inner,
  .block {
    padding: 2px;
    border: 1px solid #bbbbbb;
  }
  .node {
    border-bottom: 1px solid #bbbbbb;
    margin-bottom: 10px;
  }
  .block {
    margin-bottom: 3px;
  }
  #content-top,
  #content-header,
  #content-area,
  #content-bottom {
    margin: 0 3px 3px;
  }
  #footer {
    margin-top: 3px;
    padding: 2px;
    border: 1px solid #cccccc;
  }
  .with-navigation {
    #content,
    .sidebar {
      margin-top: 50px;
    }
  }
  #navigation {
    height: 50px
  }
}
